/* CSS Document */

body {
	font-family: 'Open Sans', sans-serif;
	background:#000099;
}
a {
	color: #669;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}
h1 {
	font: bold 36px/100% Arial, Helvetica, sans-serif;
}

/************************************************************************************
Estructura
*************************************************************************************/
#pagewrap {
	width: 960px;
	margin: 5px auto;
}
#header {
	height: 90px;
}

#header h1{
float:left;
}

#notifications{
height:28px;
width:40px;
background:#DF312D;
color:#fff;
float:right;
margin:25px 20px 0px 10px;
padding-top:12px;
font-weight:300;
cursor:pointer;
}

#user{
float:right;
height:50px;
width:auto;
margin:25px 0 ;
cursor:pointer;
}

#user img{
border:1px solid #eee;}

#user div{
margin:-30px 50px;
}

#content {
	width: 750px;
	float: right;
	padding:50px;
}
#sidebar {
	width: 100px;
	float: left;
}
#footer {
	clear: both;
}


#sidebar .menu{
list-style:none;
}

#sidebar .menu li{
font-size:35px;
margin-top:25px;
margin-bottom:25px;
color:#999;
cursor:pointer;
}

#sidebar .menu li:hover{
color:#666;
}


#top_content{
height:36px;
width:auto;
padding:4px;
}

#top_content .back_button{
float:left;
background:#CCC;
height:22px;
width:22px;
font-size:28px;
padding:8px;
color:#fff;
cursor:pointer;
}

#top_content .back_button:hover{
background:#DDD;
}

#top_content .back_button:active{
background:#777;
}

#top_content .top_title{
font-weight:300;
font-size:24px;
padding:0;
padding-top:2px;
margin:0;
margin-left:12px;
float:left;
}

#top_content .new_button{
float:right;
background:#DF312D;
height:28px;
width:auto;
font-size:18px;
font-weight:300;
line-height:27px;
padding:5px 10px 5px 10px;
color:#fff;
cursor:pointer;
}


#top_content .new_button:hover{
background:#C8221E;
}

#top_content .new_button:active{
background:#B9201C;
}

#middle_content{
margin-top:30px;
}

#middle_content2{
margin-top:18px;
}

.frame_proyect{
background:#ddd;
height:110px;
width:200px;
margin:10px;
float:left;
padding:15px;
}

.frame_proyect h2{
font-weight:300;
font-size:20px;
height:40px;
background:#000FF;
padding:0;
margin:0;
}

#proyect_status_frame{
height:30px;
width:100%;
background:#777;
margin-top:20px;
}

#proyect_status{
height:30px;
width:60%;
background:#00FF00;
}



.frame_activity{
width:95%;
height:70px;
background:#E6E6E6;
margin:5px 10px;
}
/* AZUL*/
.frame_activity .lineSinDefinir{
width:5px;
height:100%;
background:beige;
float:left;
}
/* VERDE*/
.frame_activity .lineCulminada{
width:5px;
height:100%;
background:#00CC33;
float:left;
}
/* AMARILLO NARANJA*/
.frame_activity .linePostergada{
width:5px;
height:100%;
background:#FF9933;
float:left;
}
/* BLANCO*/
.frame_activity .lineNoAsignada{
width:5px;
height:100%;
background:beige;
float:left;
}
/* BEIGE*/
.frame_activity .lineEnProceso{
width:5px;
height:100%;
background:#3366CC;
float:left;
}
/* roja*/
.frame_activity .lineRetrasada{
width:5px;
height:100%;
background:#DF312D;
float:left;
}

.frame_activity .left_line_complete{
width:5px;
height:100%;
background:#00FF00;
float:left;
}

.frame_activity .left_line_post{
width:5px;
height:100%;
background:#FF9933;
float:left;
}

.frame_activity .left_line_late{
width:5px;
height:100%;
background:#DF312D;
float:left;
}

.frame_activity .left_line_do{
width:5px;
height:100%;
background:#3366CC;
float:left;
}

.frame_activity .content_activity{
float:left;
margin:6px 35px 15px 25px;
line-height:20px;
height: 10px;
width:200px;
}

.frame_activity .block_activity{
float:left;
height:30px;
border-left:1px solid #000;
margin:10px 10px;
padding:5px 25px ;
}

.frame_activity .activity_description{
font-size:10px;
}

.frame_activity .activity_status_complete{
float:right;
background:#00CC33;
height:60px;
width:100px;
padding-top:0px;
font-size:35px;
color:#fff;
}

.frame_activity .activity_status_post{
float:right;
background:#FF9933;
height:60px;
width:100px;
padding-top:10px;
font-size:35px;
color:#fff;
}

.frame_activity .activity_status_late{
float:right;
background:#DF312D;
height:60px;
width:100px;
padding-top:0px;
font-size:35px;
color:#fff;
}

.frame_activity .activity_status_do{
float:right;
background:#3366CC;
height:60px;
width:100px;
padding-top:10px;
font-size:35px;
color:#fff;
}

.frame_activity .activity_status_sin{
float:right;
background:beige;
height:60px;
width:100px;
padding-top:10px;
font-size:35px;
color:#fff;
}

.text_status{
font-size:12px;
}

/************************************************************************************
MEDIA QUERIES
*************************************************************************************/
/* 980px o menos */
@media screen and (max-width: 980px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 76.5%;
	}
	#sidebar {
		width: 11%;
	}

}

/* 980px o menos */
@media screen and (max-width: 915px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 75.5%;
	}
	#sidebar {
		width: 11%;
	}

}

/* 980px o menos */
@media screen and (max-width: 890px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 74.5%;
	}
	#sidebar {
		width: 11%;
	}

}

/* 980px o menos */
@media screen and (max-width: 800px) {
	
	#pagewrap {
		width: 94%;
	}
	#content {
		width: 72.5%;
	}
	#sidebar {
		width: 11%;
	}

}

/* 700px o menos */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
		overflow:hidden;
	}
	#sidebar {
		width: auto;
		float: none;
	}

}

/* 480px o menos */
@media screen and (max-width: 480px) {

	#header {
		height: auto;
	}
	h1 {
		font-size: 24px;
	}
	#sidebar {
	}

}

/* detalles */
#header {
	background: #fff;
}
#content {
	background: #fff;
}
#sidebar {
	background: #ccc;
}
#header, #content, #sidebar {
	margin-bottom: 10px;
}

#header, #content, #sidebar, #footer {
	border:  none;
}




/**********INDEX ^******************/

#container{
margin-top:60px;
width:960px;
margin-left:auto;
margin-right:auto;
}

#container #left{
float:left;
width:50%;
height:550px;
background:#fff;
}

#container #left img{
margin-top:20px;
}

#container #right{
float:left;
width:50%;
height:550px;
background:#fff;
}

.text_f{
height:40px;
width:250px;
border:none;
border-bottom:1px solid #ccc;
outline-color:#fff;
padding:5px 5px 0 5px;
font-size:14px;
}

.new_button2{
float:left;
background:#0066CC;
height:28px;
width:auto;
font-size:18px;
font-weight:300;
line-height:27px;
padding:5px 10px 5px 10px;
color:#fff;
cursor:pointer;
}

#img_desc{
width:300px;
height:150px;
background:#0066CC;
font-size:30px;
color:#fff;
}

